<template>
    <div>
        <span v-if="config.showType === 'text'">
            {{row[config.name]}}
        </span>
        <span v-else-if="config.showType === 'pic'">
            <img @click="openUrl($http.root() + row[config.name].url)" style="max-height: 64px;" v-if="row[config.name] !== null" :src="$http.root() + row[config.name].url" alt="">
        </span>
        <div class="pos-r" v-else-if="config.showType === 'bool'">
                <mu-switch v-model="row[config.name]"></mu-switch>
                <div class="pos-a t0 b0 l0 r0"></div>
        </div>
        <div class="pos-r" v-else-if="config.showType === 'switch'">
            <mu-switch v-model="row[config.name]"></mu-switch>
            <div class="pos-a t0 b0 l0 r0"></div>
        </div>
        <span v-else-if="config.showType === 'date'">
            {{$utils.str2date(row[config.name])}}
        </span>
        <span v-else-if="config.showType === 'color'">
            <span style="width: 24px;height: 24px;display: inline-block" :style="{background:row[config.name]}">&nbsp;</span>
        </span>
        <span v-else-if="config.showType === 'datetime'">
            {{$utils.getDateTime(row[config.name])}}
        </span>
        <span v-else-if="config.showType === 'object'">
            <span v-if="row[config.name] !== null">{{row[config.name][config.showTypeKey]}}</span>
        </span>
        <span v-else-if="config.showType === 'files'">
            <mu-tooltip placement="left" :content="`${file.name}(${file.size})`" v-for="(file,index) in row[config.name]" :key="index">
            <mu-chip class="mar2" flat @click="openUrl($http.root() + file.url)">
                <mu-icon value="attachment"></mu-icon>
                    <span style="max-width: 150px;" class="ofe">
                        {{file.name}}({{file.size}})
                    </span>
            </mu-chip>
            </mu-tooltip>
        </span>
        <span v-else>
           {{row[config.name]}}
        </span>
    </div>
</template>

<script>
    export default {
        name: "EzListViewer",
        props: {
            config: {},
            row: {},
        },
        methods: {
            openUrl(url) {
                window.open(url, '_blank')
            }
        }

    }
</script>

<style scoped>

</style>